import { ElButton } from "element-plus";
import {defineComponent, ref} from "vue";
import BreadCrumb from "~/src/components/BreadCrumb";
import DoctorInfo from "~/src/components/DoctorInfo";
import Input from "~/src/components/Input";
import Pagination from "~/src/components/Pagination";
import SelectDate from "~/src/components/SelectDate";
import { Steps } from "~/src/components/Steps";
import { UserInfo } from "~/src/components/UserInfo";
import Style1080 from './1080.module.scss';
import Stylevedio from './vediotop.module.scss';
import { KEEP_VIDEO_TOP } from '~/src/config';
import DoctorInfoV2 from "~/src/components/DoctorInfoV2";
import router from "@/router";
import {useBreadcrumbStore} from "@/store/modules/breadcrumb";

// 定义医生信息类型
interface Doctor {
    id: string;
    picture: string;
    name: string;
    title: string;
    introduce: string;
    status: string; // '有号' 或 '满号'
}

export default defineComponent({
    setup(props) {
        const Style = KEEP_VIDEO_TOP ? Stylevedio : Style1080


        // 医生列表数据
        const doctors = ref<Doctor[]>([
            {
                id: '1',
                picture: "src/assets/images/docPic.jpg",
                name: "薛富贵",
                title: '主任医师',
                introduce: "擅长脑血管病、头痛、眩晕、认知障碍、神经系统重症疾病的诊治... ",
                status: '有号'
            },
            {
                id: '2',
                picture: "src/assets/images/docPic.jpg",
                name: "薛富贵",
                title: '主任医师',
                introduce: "擅长脑血管病、头痛、眩晕、认知障碍、神经系统重症疾病的诊治... ",
                status: '满号'
            },
            {
                id: '3',
                picture: "src/assets/images/docPic.jpg",
                name: "薛富贵",
                title: '主任医师',
                introduce: "擅长脑血管病、头痛、眩晕、认知障碍、神经系统重症疾病的诊治... ",
                status: '满号'
            },
            {
                id: '4',
                picture: "src/assets/images/docPic.jpg",
                name: "薛富贵",
                title: '主任医师',
                introduce: "擅长脑血管病、头痛、眩晕、认知障碍、神经系统重症疾病的诊治... ",
                status: '有号'
            },
            {
                id: '5',
                picture: "src/assets/images/docPic.jpg",
                name: "薛富贵",
                title: '主任医师',
                introduce: "擅长脑血管病、头痛、眩晕、认知障碍、神经系统重症疾病的诊治... ",
                status: '有号'
            },
            {
                id: '6',
                picture: "src/assets/images/docPic.jpg",
                name: "薛富贵",
                title: '主任医师',
                introduce: "擅长脑血管病、头痛、眩晕、认知障碍、神经系统重症疾病的诊治... ",
                status: '满号'
            },
            {
                id: '7',
                picture: "src/assets/images/docPic.jpg",
                name: "薛富贵",
                title: '主任医师',
                introduce: "擅长脑血管病、头痛、眩晕、认知障碍、神经系统重症疾病的诊治... ",
                status: '满号'
            },
            {
                id: '8',
                picture: "src/assets/images/docPic.jpg",
                name: "薛富贵",
                title: '主任医师',
                introduce: "擅长脑血管病、头痛、眩晕、认知障碍、神经系统重症疾病的诊治... ",
                status: '满号'
            },


        ]);

        const doctor = ref<Doctor[]>([]); // 当前页码数据
        // 分页组件返回当页数据
        const handlePageChange = (Datas:any) => {
            doctor.value = Datas;
        };

        // 跳转到挂号页面并携带医生信息
        const goToRegistration = (doctor: Doctor) => {
            // 只有有号的医生可以点击跳转
            if (doctor.status === '有号') {
                const breadcrumbStore = useBreadcrumbStore(); // 实例化Pinia存储
                breadcrumbStore.addTitle(doctor.name);
                router.push(
                    {
                    path: '/hyxz',
                    query: {
                        // doctorInfo: JSON.stringify(doctor)
                    }
                    })
                // router.push({
                //     name: 'hyxz',
                //     params: {
                //         doctorId: doctor.id,
                //         date: '2022-03-12',
                //         // 通过query传递完整医生信息
                //         doctorInfo: JSON.stringify(doctor)
                //     }
                // })
            }
        }

        function someFunction(date: object) {
            console.log(JSON.parse( JSON.stringify(date) ));
            // 函数体
        }
        return () => <>
            <UserInfo></UserInfo>
            <Steps></Steps>

            <div class={Style.container_mar} >
                <div class={Style.title}>
                    <div>
                        <BreadCrumb style={{height:'40px',marginTop:'10px'}}></BreadCrumb>
                    </div>
                    <div >
                        {/*<SelectDate class={Style.selectStyle}></SelectDate>*/}
                        <SelectDate
                            class={Style.selectStyle}
                            onDateChange={(date: object) => {someFunction(date)}}
                        ></SelectDate>
                    </div>
                </div>

                <div class={Style.body}>
                    <div class={Style.doc_style}>
                        {
                            KEEP_VIDEO_TOP ? doctor.value.map(doc => (
                                <DoctorInfoV2
                                    key={doc.id}
                                    docId={doc.id}
                                    docPicture={doc.picture}
                                    name={doc.name}
                                    title={doc.title}
                                    introduce={doc.introduce}
                                    hyzt={doc.status}
                                >
                                    {{
                                        btn: () => {
                                            return (
                                                <ElButton
                                                    type="success"
                                                    disabled={doc.status !== '有号'}
                                                    onClick={() => goToRegistration(doc)}
                                                >
                                                    立即挂号
                                                </ElButton>
                                            )
                                        }
                                    }}
                                </DoctorInfoV2>
                            )) : doctors.value.map(doc => (
                                <DoctorInfo
                                    key={doc.id}
                                    docPicture={doc.picture}
                                    name={doc.name}
                                    title={doc.title}
                                    introduce={doc.introduce}
                                    hyzt={doc.status}
                                >
                                    {{
                                        btn: () => {
                                            return (
                                                <ElButton
                                                    type="info"
                                                    disabled={doc.status !== '有号'}
                                                    onClick={() => goToRegistration(doc)}
                                                >
                                                    立即挂号
                                                </ElButton>
                                            )
                                        }
                                    }}
                                </DoctorInfo>
                            ))
                        }
                    </div>
                </div>

                <Pagination
                    style={{ marginTop: '43px', padding: "0 64px" }}
                    pageSize={3}
                    Data={doctors.value}
                    onPageChange={handlePageChange}
                ></Pagination>
            </div>
        </>
    }
})
